Reactstrap — Progress Bars and Spinners

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add a progress bar and spinners with Reactstrap.

Max Value

We can change the max value of a progress bar.

To do that, we change the max prop.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress value={50} max="200" />
    </div>
  );
}

We set max to 200 so that if the bar is full, the value will be 200.

If we have a segmented progress bar, we have to set the max value of each segment individually.

For instance, we write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Progress } from "reactstrap";

export default function App() {
  return (
    <div className="text-center">
      <Progress multi>
        <Progress bar value="5" max={10}>
          5
        </Progress>
        <Progress bar color="success" value="15" max={200}>
          15
        </Progress>
        <Progress bar color="warning" value="10" max={200}>
          10
        </Progress>
        <Progress bar color="danger" value="10" max={200}>
          10
        </Progress>
      </Progress>
    </div>
  );
}

Each segment’s bar width is calculated individually so their max value don’t influence each other.

Spinners

We can add a spinner by using the Spinner component.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner color="primary" />
    </div>
  );
}

to add the Spinner component and set the color with the color prop.

Other values for color include secondary , success , danger , warning , info , light or dark .

Growing Spinner

We can add a growing spinner with the type prop set to grow .

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner type="grow" color="primary" />
    </div>
  );
}

Sizes

The size can change with the size prop.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner size="sm" color="primary" />
    </div>
  );
}

sm means small and lg means large.

We can also change the width and height individually:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner style={{ width: "5rem", height: "5rem" }} color="primary" />
    </div>
  );
}

We make it big by changing the width and height properties of the style object.

We can add all variants of a spinner by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Spinner } from "reactstrap";

export default function App() {
  return (
    <div>
      <Spinner color="primary" />
      <Spinner color="secondary" />
      <Spinner color="success" />
      <Spinner color="danger" />
      <Spinner color="warning" />
      <Spinner color="info" />
      <Spinner color="light" />
      <Spinner color="dark" />
    </div>
  );
}

Conclusion

We can change the max value of a progress bar.

And we can add a loading spinner with the Spinner component.